import React, { Component } from "react";
import { Button } from "antd";
import { WeaDialog, WeaMap, WeaLocaleProvider } from 'ecCom';
import './style/index.css'
const getLabel = WeaLocaleProvider.getLabel;
export default class MapLocation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      locationInfo: {
        info: props.locationInfo || {},
        position: props.location || [],
        citycode: ""
      }
    };
  }

  componentWillReceiveProps(nextProps) {}

  getMapLocation = () => (this.refs.map ? this.refs.map.getCurrentInfo() : {});

  onChange = locationInfo => {
    const { onMapLocationChange } = this.props;
    typeof onMapLocationChange === "function" &&
      onMapLocationChange(locationInfo);
  };

  onSubmit = () => {
    const locationInfo = this.getMapLocation();
    this.setState({ visible: false, locationInfo });
    this.onChange(locationInfo);
  };

  onReset = () => {
    const locationInfo = {
      info: {},
      position: [],
      citycode: ""
    };
    this.setState({ visible: false, locationInfo });
    this.onChange(locationInfo);
  };

  onCancel = () => this.setVisible(false);

  setVisible = bool => this.setState({ visible: bool });

  render() {
    const { show, mapConfig = {} } = this.props;
    const { visible, locationInfo } = this.state;
    const { position, citycode, info } = locationInfo;
   
    const buttons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kexu2k@submit`} type="primary" onClick={this.onSubmit}>
        {getLabel(826, "确定")}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@sruxbt@reset`} type="ghost" onClick={this.onReset}>
        {getLabel(311, "清除")}
      </Button>,
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wukdnl@cancel`} type="ghost" onClick={this.onCancel}>
        {getLabel(31129, "取消")}
      </Button>
    ];
    return (
      <div className={'location-button'} >
        <div className={'wea-cb-item'}>
          {show || (
            <span
              onClick={() => this.setVisible(true)}
            >
              <i className="icon-coms-position" title={getLabel(22981, "位置")} />
              {getLabel(22981, "位置")}
            </span>
          )}
        </div>
          {position.length > 0 && (
            <div className="wea-rich-text-upload-list-red-p" style={{top: '10px',left: '17px'}}/>
          )}
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@2mgr1v`}
          parentClassName={'wf-map-location-dialog'}
          visible={visible}
          title={getLabel("514074", "选择位置")}
          style={{ width: 900, height: 600 }}
          buttons={buttons}
          onCancel={() => this.setVisible(false)}
          icon={'icon-coms-workflow'}
          iconBgcolor={'rgb(0, 121, 222)'}
          layout={jQuery('.wf-req')[0]} //处理流程批量打印页面和后台流程测试页面是iframe页面，子层向父层弹框的问题
        >
          <WeaMap ecId={`${this && this.props && this.props.ecId || ''}_WeaMap@tjosaz`}
            ref="map"
            position={position}
            info={info}
            citycode={citycode}
            zoom={14}
            showInfoWindow={true}
            showInfoWin={true}
            showSearchBar={true}
            showGeolocation={true}
            clickToChangePosition={true}
            {...mapConfig}
          />
        </WeaDialog>
      </div>
    );
  }
  // render() {
  //   return (
  //   <div>
  //     <div className="map-icon">位置分享</div>
  //   </div>
  //   )
  // }
}
